<template>
	<cu-custom :customStyle="{backgroundColor:'#ff8216'}" :isBack="true" :paddingHeight="0">
	</cu-custom>
	<view>
		<view style="position: relative;background-color:#fff;" :style="{width:$device.windowWidth() + 'px',height:$device.measure.windowHeight + 'px'}">
			<view style="margin: 0 20px 20px 20px;padding: 20px;">
				<text style="font-size: 20px;font-weight: bold;">掌聘人力招聘平台</text>
			</view>
			  
			<view style="position: absolute;top: 15%;width:100%;height:50px;">
				<!-- <image :src="absUrl('/static/zp.png')"></image> -->
				 
				<!-- 兼职卡片 -->
				<view style="background-color: white;margin: 0 15px 15px 15px;border-radius: 20rpx;z-index: 2;position: relative;box-shadow: 0px 5px 9px 3px rgb(117 115 115 / 23%);">
					<view style="margin: 8px 15px 0px 15px;padding-top: 10px;">
						<view style="font-size: 38rpx;font-weight: bold;margin-bottom: 0rpx;">
							乐从华美达酒店招聘宴会日结兼职
						</view>
						
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px 15px 0px;15px">
							<view style="font-size: 15px;font-weight: bold;font-size: 18px;margin:5px;color: #515151;">2023年6月22日</view>
							<view style="font-size: 15px;font-size: 18px;margin:5px;">上午11:00 - 下午19:00</view>
							<view style="color: #989898;font-size: 15px;font-size: 12px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"><u-icon name="info-circle" color="#989898"></u-icon> 到场时间:上午10:00</view>
							
							<!-- 倒计时 -->
							<view style="color: white;margin:10px;display: flex;justify-content: center;align-items: center;background-color: #ff7300;border-radius: 100px;padding:5px 15px;box-shadow: 2px 2px 12px 0px #6f6f6f55;">
								报名截止:
								<u-count-down
								        :time="30 * 60 * 60 * 1000"
								        format="DD:HH:mm:ss"
								        autoStart
								        millisecond
								        @change="onChange"
								    >
								        <view class="time">
								            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
								            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
								            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
								            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
								        </view>
								</u-count-down>
							</view>
						</view>
					</view>
					
					<view style="display: flex;align-items: center;border-top: solid 1px #f8f8f8;">
						<view style="padding: 10px;">
							<span style="
							font-size: 24rpx; 
							color:#b6b6b6;"
							>广东掌聘人力资源有限公司</span>
							<span style="
								background-color: #fff6c7;
								border-radius: 100rpx;
								padding: 6rpx 20rpx;
								margin-left: 14rpx;
								text-align: center;
								color: #ff8725;
								font-size: 20rpx;
								">企业认证</span>
						</view>
					</view>
						
					<!--商户名片-->
					<view style="">
						<!-- 卡片头 -->
						<!-- <view style="border-bottom:solid 1px #eeeeee;padding:10px 10px;color: #7b7b7b;">来至企业微信 邀请报名</view> -->
						<!-- 卡片体 -->
						<view style="padding: 10px;border-top:solid 1rpx #eeeeee;">
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<u-avatar :src="absUrl('/static/avatar.jpg')" size="100"></u-avatar>
								<view style="margin:0 10px;">
									<view style="padding: 5px 0;font-size: 16px;">
										 <span>云谷少侠</span><span>&nbsp;</span><span style="color: limegreen">@麦微</span>
									</view>
									<view style="color: #7d7d7d;">
										{{'招聘员'}}
									</view>
								</view>
							</view>
						</view>
						<!-- 卡片脚 -->
						<view style="border-top:solid 1rpx #eeeeee;padding: 10px;color: #7b7b7b;">邀请你报名兼职</view>
					</view>
				</view>
				
				<view @click="showPopup = true" style="margin: 30px 15%;display: flex;justify-content: center;align-items:center;height:50px;background-color: limegreen;border-radius: 100px;">
					<text style="font-size: 15px;color: white;">微信一键报名</text>
				</view>
			</view>
			

		</view>
		
		<u-popup :show="showPopup" :round="10" @close="showPopup=false">
			<view style="">
				<view style="padding: 20px;">
					<view>获取你的头像、昵称</view>
				</view>
				<u-line></u-line>
				<!-- 用户信息表单 -->
				<view style="margin-bottom: 10px;">
					<!-- 头像字段 -->
					<view style="padding: 0px;"> 
						<view style="padding: 10px;display: flex;justify-content: space-between;align-items: center;">
							<!-- 左排 -->
							<view style="display: flex;align-items:center;">
								<view style="font-size: 15px;">头像</view>
								<view style="margin-left: 10px;"><u-avatar :src="formData.userInfo.headicon" size="70"></u-avatar></view>
							</view>
							  
							<!-- 右排 -->
							<view style="display: flex;flex: 1 0 0;">
								<view style="flex: 1 0 0;">  
									<button plain="true" :style="{backgroundColor:'transparent',border:'none'}" open-type="chooseAvatar" @chooseavatar="chooseAvatar">&nbsp</button>
								</view>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						
						<u-line></u-line>
					</view>
					
					<!-- 昵称字段 -->
					<view style="padding: 0px;">
						<view style="padding: 10px 10px;display: flex;justify-content: space-between;">
							<!-- 左排 -->
							<view style="flex:1 0 0;display: flex;align-items: center;justify-content: center;">
								<view style="font-size: 15px;">昵称</view>
								<view style="flex:1 0 0;margin-left: 10px;margin-top: 5px;">
									<input type="nickname" :value="formData.userInfo.nickname" @blur="onInputNickname" placeholder="请输入昵称"
										@input="onInputNickname" />
								</view>
							</view>
							
							<!-- 右排 -->
							<view style="display: flex;">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						
						<u-line></u-line>
					</view>
					
					<!-- 号码字段 -->
					<view style="padding: 0px;">
						<view style="padding: 10px 10px;display: flex;justify-content: space-between;">
							<!-- 左排 -->
							<view style="display: flex;align-items: center;">
								<view style="font-size: 15px;">手机号</view>
								<view style="margin-left: 10px;">15899574030</view>
							</view>
							
							<!-- 右排 -->
							<view style="display: flex;">
								<button size="mini" open-type="getPhoneNumber" @getphonenumber="onPhoneNumber">微信获取</button>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						
						<u-line></u-line>
					</view>
				</view>
				
				<view style="display: flex;justify-content:center;margin-bottom: 10px;">
					<view style="flex: 0 0 40%;"><u-button :customStyle="{width:'100px'}" >取消</u-button></view>
					<view style="flex: 0 0 40%;"><u-button type="primary" :disabled="true" :customStyle="{width:'100px'}">加入</u-button></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeData: {
					day:1,
					hours:30,
					minutes:50,
					seconds:21
				},
				showPopup:false,
				formData:{
					userInfo:{
						headicon: this.absUrl('/static/avatar.jpg'),
						nickname:'ㄣ單鯓莮孓灬'
					}
				}
			}
		},
		methods:{
			onLogin(){
				uni.login({
					provider:'weixin',
					success(res) {
						console.log(res)
					}
				})
			},
			chooseAvatar(e){
				console.log(e)
				this.formData.userInfo.headicon = e.detail.avatarUrl
			},
			onInputNickname(e){
				console.log(e)
			},
			onPhoneNumber(e){
				console.log(e)
				this.$http.post('/v3/api/hi',{
					iv:e.detail.iv,
					encryptedData:e.detail.encryptedData,
					code:e.detail.encryptedData,
				}).then((res)=>{
					 console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
$u-button-u-button-height: 40px !default;

.custom {
	height: $u-button-u-button-height;
}
</style>
